<!-- App.vue -->
<template>
  <div class="container">
    <h1>MinIO 图片展示</h1>

    <!-- 加载状态显示 -->
    <div v-if="loading" class="loading">
      加载中...
    </div>

    <!-- 错误信息显示 -->
    <div v-if="error" class="error">
      {{ error }}
    </div>

    <!-- 图片网格展示区域 -->
    <div v-if="!loading && !error" class="image-grid">
      <div v-for="(url, index) in imageUrls" :key="index" class="image-item">
        <img :src="url" :alt="'Image ' + (index + 1)" @error="handleImageError">
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const imageUrls = ref([])
const loading = ref(true)
const error = ref('')

// 获取图片列表
const fetchImages = async () => {
  loading.value = true
  error.value = ''

  try {
    const response = await axios.get('http://localhost:8081/api/images/list', {
      timeout: 5000, // 设置超时时间
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })
    imageUrls.value = response.data
  } catch (error) {
    console.error('获取图片列表失败:', error)
    if (error.code === 'ERR_NETWORK') {
      error.value = '无法连接到服务器，请确保后端服务正在运行'
    } else {
      error.value = '获取图片列表失败: ' + error.message
    }
  } finally {
    loading.value = false
  }
}

// 处理图片加载错误
const handleImageError = (event) => {
  event.target.src = 'https://via.placeholder.com/300x200?text=Image+Error'
}

// 组件挂载时获取图片列表
onMounted(() => {
  fetchImages()
})
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.loading {
  text-align: center;
  padding: 20px;
  font-size: 18px;
  color: #666;
}

.error {
  text-align: center;
  padding: 20px;
  color: #ff4444;
  background-color: #ffeeee;
  border-radius: 4px;
  margin: 20px 0;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.image-item {
  position: relative;
  padding-bottom: 75%;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.image-item:hover {
  transform: scale(1.02);
}

.image-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 480px) {
  .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
</style>